<template>
	<el-row style="width: 100%">
		<el-row :gutter="20">
			<el-col :md="24" :lg="24">
				<section class="wt-header" style="padding:0; overflow:hidden">
					<a :href="patientUrl"><h3>{{caseData.patientName}}</h3></a><span>{{patientGender}}</span><span>出生日期：{{patientBirthday}}</span><span>病案号：{{caseData.patientId}}</span>
						<el-tag
							type="primary"
							v-for="tag in caseData.caseName"
							:key="tag"
						>{{tag}}</el-tag>
					<div class="rightButtons" v-if="hasEditPermission">
						<el-button
							@click="editCase"
							icon="edit">修改病例基本信息</el-button>
						<el-button
							@click="deleteCase"
							:icon="deleteIcon">删除该病例</el-button>
					</div>
					<div class="message" v-if="!hasEditPermission">
						<el-alert
								title="没有权限修改本病例"
								type="info"
								show-icon>
						</el-alert>
					</div>
				</section>
			</el-col>
		</el-row>
		<el-tabs type="border-card" v-model="tab">
			<el-tab-pane label="病例概要" name="timeline" style="min-height: 200px">
				<wt-model-timeline
					ref="timeline"
					:models="config.categories"
					:config="config.timeline"
					:params-data="paramsData"
					:allow-edit="hasEditPermission"
					@edit="handleTimelineEdit"
				></wt-model-timeline>
			</el-tab-pane>
			<template v-for="(cat,index) in categories">
				<el-tab-pane :label="cat.title" :name="cat.name" style="min-height: 200px">
					<span slot="label">
						<img class="tab-icon" :src="getCategoryIcon(cat)"/>
						<span >{{cat.title}}[{{number[cat.tableName]}}]</span>
					</span>
					<template v-if="cat.single && !cat.customDisplay">
						<wt-model-info v-on:count="handleCountChange" :ref="cat.name" :model="cat" :params-data="paramsData" :allow-edit="hasEditPermission"></wt-model-info>
					</template>
					<template v-else>
						<wt-model-table
							:ref="cat.name" 
							:model="cat" 
							:params-data="paramsData" 
							:allow-add="hasEditPermission"
							:allow-edit="hasEditPermission"
							:allow-remove="hasEditPermission"
							v-on:count="handleCountChange"
						></wt-model-table>
					</template>
				</el-tab-pane>
			</template>
		</el-tabs>
	</el-row>
</template>
<script>
	/**
		病例详情，包含病例下的分类，以及病例基本信息展示
	 */
	import Vue from 'vue'
	import ElementUI from 'element-ui'
	import Models from '../js/case-config';
	import ModelTable from 'winged/components/wt-model-table';
	import ModelInfo from 'winged/components/wt-model-info';
	import gender from '../../../Resources/utils/wt-form-utils';
	import request from 'winged/utils/axios';
	import Timeline from 'winged/components/wt-model-timeline';
	import Permission from 'winged/utils/wt-permission';
	import Routes from '../js/routes';
	import ImageTimeCalculator from './case-image-time-calculator';
	import FormUtils from 'winged/utils/wt-form-utils';
	import CaseDischargeDays from './case-discharge-days';
	import CaseDischargeDate from './case-discharge-date';
	import CaseAdmissionDate from './case-admission-date';
    import DateFormat from '../../../Resources/utils/wt-time-utils'

	Vue.use(ElementUI);
	Vue.component(ModelTable.name, ModelTable);
	Vue.component(ModelInfo.name, ModelInfo);
	Vue.component(Timeline.name, Timeline);
	Vue.component(ImageTimeCalculator.name, ImageTimeCalculator);
	Vue.component(CaseDischargeDays.name, CaseDischargeDays);
	Vue.component(CaseDischargeDate.name, CaseDischargeDate);
	Vue.component(CaseAdmissionDate.name, CaseAdmissionDate);
	export default {
		name: 'wt-case-detail',
		props: {
			// 病例记录的数据
			caseData: {
				type: Object,
				required: true
			},
			count: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				config: Models,
				tab: 'timeline',
				number: this.count,
				// 子类别查询可能用到的参数
				paramsData: {
					case_id: this.caseData.id,
					patientBirthday: this.caseData.patientBirthday,
				},
				hasEditPermission: Permission.checkPermission('patient-case-add') && Permission.canEditCase(this.caseData.properties.creator_doctor_grade, this.caseData.creator_doctor_id),/*传入病例等级/病例创建者等级*/
				deleting: false,
			}
		},
		watch: {
			'tab'(val, oldValue){
				if (val == oldValue) return;
				this.loadCurrentTab();
			},
		},
		computed: {
			categories: function() {
				return this.config.categories;
			},
			deleteIcon: function() {
				return this.deleting ? 'loading' : 'delete';
			},
			patientGender: function() {
				return FormUtils.formatGender(this.caseData.patientGender);
			},
			patientUrl: function() {
				return Routes.patientShow(this.caseData.id, this.caseData.patientId);
			},
            patientBirthday: function() {
                var d = new Date(this.caseData.patientBirthday)
                return DateFormat.format(d,'date')
            }
		},
		methods: {
			getCategoryIcon(cat) {
					let name = cat.name;
					if (cat.name == this.tab) {
							name += '-active';
					}
					return '/icons/case/' + name + '.png';
			},
			loadCurrentTab() {
				let comp = this.$refs[this.tab];
				if (comp !== undefined) {
					if (Array.isArray(comp)) {
						comp = comp[0];
					}
					if (this.doEdit && comp.edit) {
						comp.edit(this.doEditData);
						this.doEdit = false;
					}
					else {
						comp.load();
					}
				}
			},
			handleTimelineEdit(model, data) {
				console.log(model, data);
				this.doEdit = true;
				this.doEditData = data;
				this.tab = model.name;
			},
			handleCountChange(data){
				let model = data.model;
				let count = data.data;
				this.number[model.tableName] = count;
			},
			editCase() {
				window.location = Routes.caseEdit(this.caseData.id);
			},
			deleteCase() {
				let _this = this;
				this.$confirm('确定删除本病例吗？', '操作提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
				}).then(() => {
					_this.deleting = true;
					let path = `patients/case/${_this.caseData.id}`;
					window.axios.delete(path).then(function (response) {
						_this.deleting = false;
						if (response.status == 200) {
							_this.$message.success('病例删除成功!');
							window.location = Routes.caseList();
						}
						else {
							console.error(response);
							_this.$message.error('病例删除失败！');
						}
					}).catch(function (error) {
						_this.deleting = false;
						console.error(error);
						_this.$message.error('病例删除失败！');
					});
				}).catch(() => {
					console.error('[delete case] error happened');
				});
			},
		},
		created() {
			if (this.caseData.caseName.indexOf('["')>-1){
				this.caseData.caseName = JSON.parse(this.caseData.caseName);
			}else {
				this.caseData.caseName = '["'+this.caseData.caseName+'"]';
				this.caseData.caseName = JSON.parse(this.caseData.caseName);
			}
			let number = {};
			let a;
			for (let item in this.count){
				for (let i in this.count[item]){
					if (i == 'progress_note'){
						a = 'process_note';
					}else if (i == 'clinical_check'){
						a = 'clinic_check';
					}
					else {
						a = i;
					}
					number[a] = this.count[item][i];
					}
			}
			this.number = number;
		},
		mounted() {

			this.loadCurrentTab();
		},
	}
</script>
<style scoped>
	.basic{
		width: 100%;
		/*height: 40px;*/
		line-height: 30px;
		/*margin-bottom: 10px;*/
	}
	.diagnose{
		height: 40px;
		line-height: 40px;
		margin-bottom: 10px;
	}
	.el-tag{
		/*margin: 10px 0 15px 10px;*/
		min-height: 28px;
		line-height: 26px;
		font-size: 14px;
	}
	.tab-icon{
		width: 30px;
		height: 30px;
	}
	.content{
		padding-top: 3px!important;
		color: #999;
	}
	.wt-header{
		width:100%;
		margin: 0 0 10px 0;
		display:inline-block;
		vertical-align:middle;
		position:relative;
	}
	.wt-header>*{
		display:inline-block;
		vertical-align:middle;
		margin:4px 0 4px 0;

	}
	.wt-header h3 {
		margin:0;
	}
	.wt-header span {
		margin-left: 10px;
	}
	.message,.rightButtons {
		float: right;
		margin-top:0;
	}
	.message>div{
		padding-right:2em;
	}
</style>